<template>
  <div class="h100% w100%">
    <van-swipe class="h100vh w100%" vertical :loop="false" :show-indicators="false" @change="onSwipeChange"
      duration="600" lazy-render @drag-end="dragStart" v-if="isShowVideo">
      <van-swipe-item v-for="(video, index) in videos" :key="video.id" @click="playIndexVideo(index)"
        class="relative flex justify-center bg-#120509">
        <video :src="video.address" class="video" :autoplay="index == currentIndex" loop playsinline preload="metadata"
          poster="@/assets/loading.gif">
        </video>
        <div class="w100% h100% absolute top-0 left-0 z20 flex justify-center items-center bg-#000000 opacity-70"
          v-if="videoLoading">
          <img src="@/assets/loading.gif" alt="" class="object-contain w250px h350px ">
        </div>
        <van-icon :name="videoState ? 'play' : 'pause'"
          class="absolute top-1/2 left-1/2  text-6xl text-#e4ece5 video-icon" />
        <div
          class="absolute bottom-0 left-0% w-100% pl2% pr2% box-border video-progress flex justify-between items-center z21 bg-#0000004a"
          :style="{ opacity: showProgress ? 1 : 0 }" @touchmove="showProgress = true">
          <span class="text-#fff font-size-15px mr10px">{{ formatTime(currentTime) }} / {{ formatTime(duration)
            }}</span>
          <slisd :min="0" :max="100" :value="updateProgress" :isDrag="true" bgColor="#4ab157" @stop="updateTime"
            @input="showProgress = true">
          </slisd>
        </div>
      </van-swipe-item>
    </van-swipe>
    <van-empty image="network" description="暂无数据"  v-else class="mt50%"/>
  </div>
</template>

<script src="./index.js"></script>


<style lang="scss" scoped>
@forward "./index.scss";;
</style>